import React, { memo, useState } from "react";
import { Link } from "react-router-dom";
import { Menu } from 'antd';
import { MailOutlined, AppstoreOutlined, SettingOutlined  } from '@ant-design/icons';

const { SubMenu } = Menu;

const Sider = ({ theme, mode = 'horizontal', style }) => {
  const [current, setCurrent] = useState('home');

  function handleClick(e) {
    return setCurrent(e.key)
  }

  return (
    <Menu onClick={handleClick} selectedKeys={[current]} mode={mode} theme={theme} style={style}>
      <Menu.Item key="home" icon={<MailOutlined />}>
       <Link to="/profile">首页</Link>
      </Menu.Item>
      <Menu.Item key="about" icon={<AppstoreOutlined />}>
        <Link to="/about">关于我们</Link>
      </Menu.Item>
      <SubMenu key="SubMenu" icon={<SettingOutlined />} title="Navigation Three - Submenu">
        <Menu.ItemGroup title="Item 1">
          <Menu.Item key="setting:1">Option 1</Menu.Item>
          <Menu.Item key="setting:2">Option 2</Menu.Item>
        </Menu.ItemGroup>
        <Menu.ItemGroup title="Item 2">
          <Menu.Item key="setting:3">Option 3</Menu.Item>
          <Menu.Item key="setting:4">Option 4</Menu.Item>
        </Menu.ItemGroup>
      </SubMenu>
      <Menu.Item key="other">
        <Link to="/other">其他</Link>
      </Menu.Item>
    </Menu>
  );
};

export default memo(Sider)
